<template>
  <section class="complain_common_wrap">
    <div class="complain_common_cont">
      <div class="title">
        投诉信息
        <el-date-picker class="title_time" v-model="complainTime" type="date" placeholder="请选择时间" :shortcuts="shortcuts"
          format="YYYY-MM-DD" value-format="YYYY-MM-DD" size="small" @change="getComplainTime" />
        <!-- <el-date-picker class="title_time" v-model="complainTime" type="datetime" placeholder="请选择时间"
          :shortcuts="shortcuts" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" size="small"
          @change="getComplainTime" /> -->
      </div>
      <div class="data_section">
        <el-col :span="24">
          <el-card shadow="hover">
            <img src="../icon/yujing.svg" alt="" style="float: left; padding-right: 8px" />
            <div class="box">
              <div class="box_left" @click="showDialog('gyyj')">今日广义投诉：<b>{{ complaintOverviewData.total }}</b>起</div>
              <div class="box_right" @click="showDialog('yjqy')">预警区域：<b>{{ circleLength }}</b>个</div>
            </div>
          </el-card>
        </el-col>
      </div>

      <!-- 表格 -->
      <el-table class="table_wrap" :data="complaintOverviewData.countyComplaintVoList" v-loading="loading"
        @cell-click="tbClick">
        <!-- <el-table-column type="index" width="50" label="#" align="center" /> -->
        <el-table-column prop="county" label="区县" width="50" align="center">
          <template #default="scope">
            <span class="tb_click">{{ scope.row.county }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="complaintCount" label="投诉量" min-width="60" align="center" sortable>
          <template #default="scope">
            <span>{{ scope.row.complaintCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lteSurfCount" label="4G上网" width="60" align="center" sortable>
          <template #default="scope">
            <span>{{ scope.row.lteSurfCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="volteCount" label="4GVOLTE" width="75" align="center" sortable>
          <template #default="scope">
            <span>{{ scope.row.volteCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="nrSurfCount" label="5G上网" width="auto" min-width="76" align="center" sortable>
          <template #default="scope">
            <span>{{ scope.row.nrSurfCount }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-divider></el-divider> -->
      <div style="width: 100%;display: flex;justify-content: center;align-items: center;padding: 10px;">
        <el-button type="primary" @click="showDialog('gyyj')">投诉列表</el-button>
        <el-button type="primary" @click="showDialog('yjqy')">预警列表</el-button>
        <el-button type="primary" @click="pushToDetail">指标详情</el-button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from "vue";
// api相关
import { apiCommon } from "@/utils/index.js";
import * as complainApi from "@/api/complain/complain";
// 工具
import { complainDataStore } from '@/store/modules/complain.js'  // store

const emit = defineEmits(['showDialog', 'setComplainByTime', 'renderGeojsonByCounty'])
const { setComplainTime } = complainDataStore()

const props = defineProps({
  circleLength: {
    type: Number,
    default: 0,
  },
})

const complainStoreData = complainDataStore()

let complainTime = ref(`${complainStoreData.complainTime}`)

let complaintOverviewData = ref({});

const router = useRouter();
let loading = ref(false);

const shortcuts = [
  {
    text: "Today",
    value: new Date(),
  },
  {
    text: "Yesterday",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "A week ago",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];

const tbClick = (row, column, cell, event) => {
  /* console.log('点击的行数据:', row);
  console.log('点击的列属性:', column);
  console.log('点击的单元格 DOM:', cell);
  console.log('原生事件:', event); */

  if (column.label == '区县') {
    // console.log('点击的是区县');
    emit('renderGeojsonByCounty', row.county);
    return;
  }

  let obj = {
    county: row.county,
    type: column.label,
  }

  emit("showDialog", 'gyyj', obj);
}

const getData = async () => {
  const params = {
    date: complainStoreData.complainTime,
  }

  loading.value = true
  complaintOverviewData.value = await apiCommon(complainApi.queryComplaintOverview, params);

  loading.value = false

  complaintOverviewData.value = complaintOverviewData.value.data;
  // console.log(complaintOverviewData.value);
};

function pushToDetail() {
  router.push("complainDetail");
}

const showDialog = (val) => {
  // console.log(val)

  emit("showDialog", val);
}

const getComplainTime = (val) => {
  // console.log(val)

  setComplainTime(val)
  getData()

  emit('setComplainByTime')
}

getData();
</script>

<style lang="scss" scoped>
.complain_common_wrap {
  position: absolute;
  display: block;
  top: 70px;
  right: 32px;
  padding: 0;
  width: 20%;
  min-width: 345px;
  z-index: 1;

  .controlBtn {
    display: block;
    float: left;
    padding: 0;
    z-index: 1;
  }

  .complain_common_cont {
    width: 100%;
    min-height: 100px;
    max-height: 70vh;
    padding: 10px 10px 0 10px;
    /* overflow: auto; */
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    /* box-sizing: border-box; */

    :deep .table_wrap {
      margin-top: 15px;
      height: 35vh;

      .el-table__header-wrapper,
      .el-table__body-wrapper {

        th,
        td {
          padding: 0;
        }

        .cell {
          margin: 0;
          padding: 0;
          font-size: 12px;
        }
      }

      .el-table__header-wrapper {
        .caret-wrapper {
          height: 6px;
          width: 10px;

          .sort-caret {
            border-width: 3px;
          }
        }
      }

      .el-table__body-wrapper {
        .el-table__row {
          .cell {
            cursor: pointer;

            .tb_click {
              &:hover {
                color: #235bf6;
              }
            }
          }
        }
      }
    }

    :deep .title {
      width: 100%;
      font-weight: bold;
      margin-bottom: 20px;

      .title_time {
        /* border: 1px solid #000; */
        /* float: right;
        margin-right: 20px;
        font-weight: 100;
        font-size: small; */
        float: right;
        width: 155px;
      }
    }

    .box {
      // display: inline-block;
      height: 100%;
      /* padding-left: 3px; */
      display: flex;
      justify-content: space-between;
      align-items: center;
      /* align-items: center; */

      .box_left,
      .box_right {
        margin-top: 10px;
        cursor: pointer;
        font-size: 12px;

        b {
          position: relative;
          font-size: 20px;
          color: #5c5a5a;
          margin-right: 3px;
        }
      }
    }

    .data_section {
      /* margin-bottom: 20px; */

      .rowClass {
        margin-bottom: 20px;
        /* padding-left: 20px; */
      }
    }
  }
}

:deep(.el-card__body) {
  padding: 0;
}
</style>
